<template>
    <div class="category">
        分类
        <div class="sideBar">
            <ul>
                <li v-for="(item,index) in tabList" :key="item.id" @click="tabEvents(index)" :class="index == selectIndex ? 'active' : ''">
                    {{item.name   }}
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <router-link tag="li" :to="`/category/list?id=${item.id}`" v-for="item in child" :key="item.id">
                    <img :src="item.wap_banner_url" alt="">
                    <h2>{{item.name}}</h2>
                </router-link>
            </ul>
        </div>
    </div>
</template>

<script>
import {
    indexaction,
    currentaction
} from "@/api/category"
export default {
    data() {
        return {
            tabList:[],
            selectIndex:0, // 用于保持当前选中sideBar 的下标
            child:[]
        };
    },
    computed: {

    },
    async created() {
       var res =  await indexaction()
       this.tabList = res.categoryList  /// 1000ms
       
        // ajax 异步
        var result =await currentaction({
            id:this.tabList[this.selectIndex].id
        })
        console.log(result)
        this.child = result.data.currentOne.subList;
    },
    mounted() {

    },
    methods: {
       async tabEvents(index){
            this.selectIndex = index
            var result =await currentaction({
                id:this.tabList[this.selectIndex].id
            })
            console.log(result)
            this.child = result.data.currentOne.subList;
        }
    },
};
</script>

<style scoped lang="scss">
.category{
    .sideBar{
        width: 100px;
        position: fixed;
        top:10px;
        left: 10px;
        li{
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .active{
            color: #cea62a;
        }
    }
}
</style>
